<template>
  <div>
    <el-card>
        <div class="search_box">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="发放单号">
          <el-input v-model="searchForm.outNum"></el-input>
        </el-form-item>
        <el-form-item label="发放类型">
          <el-select v-model="searchForm.type" placeholder="发放类型">
            <el-option label="全部类型" value=""></el-option>
            <el-option label="政府领取" value="0"></el-option>
            <el-option label="医院领取" value="1"></el-option>
            <el-option label="小区领取" value="2"></el-option>
            <el-option label="个人领取" value="3"></el-option>
            <el-option label="其他领取" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="已发放" :value="0"></el-option>
            <el-option label="回收站" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="success" @click="fafang"> 发放 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="stockList" border stripe>
        <el-table-column prop="id" label="#" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="outNum"
          width="150"
          show-overflow-tooltip
          label="发放单号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="type" label="发放类型" align="center">
          <template scope="scope">
            <el-tag size="mini" type="success" v-if="scope.row.type === 0"
              >政府领取</el-tag
            >
            <el-tag size="mini" type="info" v-if="scope.row.type === 1"
              >医院领取</el-tag
            >
            <el-tag size="mini" type="danger" v-if="scope.row.type === 2"
              >小区领取</el-tag
            >
            <el-tag size="mini" type="warning" v-if="scope.row.type === 3"
              >个人领取</el-tag
            >
            <el-tag size="mini" type="success" v-if="scope.row.type === 4"
              >其他领取</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="priority"
          width="200"
          label="紧急程度"
          align="center"
        >
          <template scope="scope">
            <el-rate
              :disabled="true"
              v-model="scope.row.priority"
              show-text
              :max="5"
              :texts="['不急', '常规', '紧急', '特急', '超急']"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发放地点" align="center">
        </el-table-column>
        <el-table-column prop="productNumber" label="总数" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              type="danger"
              effect="plain"
              v-if="scope.row.status == 1"
              >回收</el-tag
            >
            <el-tag size="mini" effect="plain" v-if="scope.row.status == 0"
              >已放</el-tag
            >
            <el-tag
              size="mini"
              effect="plain"
              type="warning"
              v-if="scope.row.status == 2"
              >审核中</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          show-overflow-tooltip
          label="发放时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center">
          <template scope="scope">
            <el-button type="text" @click="getInfo(scope.row.id)">
              明细
            </el-button>
            <span v-if="scope.row.status === 0">
              <el-popconfirm
                @confirm="handleRemove(scope.row.id)"
                title="这是一段内容确定移入回收站吗？"
              >
                <el-button type="text" slot="reference">回收站</el-button>
              </el-popconfirm>
            </span>
             <span v-if="scope.row.status === 1">
              <el-popconfirm
                @confirm="handleBack(scope.row.id)"
                title="这是一段内容确定还原吗？"
              >
                <el-button type="text" slot="reference">还原</el-button>
              </el-popconfirm>
            </span>
             <span v-if="scope.row.status === 1">
              <el-popconfirm
                @confirm="handleDel(scope.row.id)"
                title="这是一段内容确定删除吗？"
              >
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pageTools
      :total="total"
      :paginationPage="searchForm.pageNum"
      :paginationPagesize="searchForm.pageSize"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    ></pageTools>
    <el-dialog title="入库明细" width="65%" :visible.sync="dialogVisible">
      <el-card>
        <el-descriptions class="margin-top" :column="4">
          <el-descriptions-item label="省市区">
            <el-tag size="small">{{
              detalisData.consumerVO.address
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="具体位置">
            <el-tag size="small">{{
              detalisData.consumerVO.name
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="联系人">
            <el-tag size="small">{{
              detalisData.consumerVO.contact
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="电话">
            <el-tag size="small">{{ detalisData.consumerVO.phone }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!--                步骤条-->
      <el-steps
        simple
        v-if="detalisData.status === 0"
        style="margin-left: 10px; margin-bottom: 5px"
        :space="200"
        :active="3"
        finish-status="success"
      >
        <el-step title="提交入库单"></el-step>
        <el-step title="审核入库单"></el-step>
        <el-step title="进入库存"></el-step>
      </el-steps>
      <el-steps
        simple
        v-if="detalisData.status === 2"
        style="margin-left: 10px; margin-bottom: 5px"
        :space="200"
        :active="2"
        finish-status="success"
      >
        <el-step title="提交入库单"></el-step>
        <el-step title="审核入库单"></el-step>
        <el-step title="进入库存"></el-step>
      </el-steps>
      <el-table :data="detalisData.itemVOS" border stripe>
        <el-table-column align="center" prop="name" label="名称">
        </el-table-column>
        <el-table-column align="center" prop="pnum" label="编号">
        </el-table-column>
        <el-table-column align="center" prop="pnum" label="规格">
        </el-table-column>
        <el-table-column align="center" prop="operator" label="图片">
          <template scope="scope">
            <el-image :src="scope.row.imageUrl">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="数量">
        </el-table-column>
        <el-table-column align="center" prop="unit" label="单位">
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        small
        layout="prev, pager, next,"
        :total="detalisData.total"
      >
      </el-pagination> -->
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, info, remove, back, del } from '../../../api/outstock'
export default {
  data () {
    return {
      searchForm: {
        pageSize: 5,
        pageNum: 1,
        outNum: '', // 单号
        status: 0,
        type: ''
      },
      stockList: [],
      total: 0,
      dialogVisible: false,
      detalisData: {
        consumerVO: {},
        itemVOS: [],
        total: 0,
        status: 0
      }
    }
  },
  methods: {
    async handleBack (id) {
      const res = await back(id)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('移除回收站成功')
      this.getStockList()
    },
    async handleDel (id) {
      const res = await del(id)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('删除成功')
      this.getStockList()
    },
    // 回收站
    async handleRemove (id) {
      const res = await remove(id)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('加入回收站成功')
      this.getStockList()
    },
    async getInfo (id) {
      this.dialogVisible = true
      const res = await info(id)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.detalisData = res.data
    },
    pageChange (val) {
      this.searchForm.pageNum = val
      this.getStockList()
    },
    pageSizeChange (val) {
      this.searchForm.pageSize = val
      this.getStockList()
    },
    fafang () {
      this.$notify.info('该功能暂未开放')
    },
    search () {
      this.searchForm.pageNum = 1
      this.getStockList()
    },
    reset () {
      this.searchForm = {
        pageSize: 5,
        pageNum: 1,
        outNum: '', // 单号
        status: 0,
        type: ''
      }
      this.getStockList()
    },
    async getStockList () {
      const res = await list(this.searchForm)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.total = res.data.total
      this.stockList = res.data.rows
    }
  },
  created () {
    this.getStockList()
  }
}
</script>

<style>
</style>
